<template>
    <div style="background-color: #F5F5F5;">
        <el-container style="width: 70%;margin: 0 auto;">
            <!--页头-->
            <el-header style="width: 0;height: 0"></el-header>
            <Header></Header>

            <el-carousel height="250px">
                <el-carousel-item v-for="item in urls" :key="item.id">
                    <img :src=item.idView style="width: 100%">
                </el-carousel-item>
            </el-carousel>

            <el-main style="height: 700px;background-color:#8FC0A9;">
                <div style="padding: 50px;height: 500px">
                    <el-tabs :tab-position="tabPosition" >
                        <el-tab-pane label="热门推荐" style="height: 600px;">
                            <div
                                    v-for="(item,id) in posts" :key="item.postId"
                                    @click="goPostDetail(item.postid)"
                                    style="margin-left:100px;margin-top: 20px;
                                    background-color:#FAF3DD;width: 600px;height: 100px;
                                    border-radius: 5px;box-shadow: #2c3e50 2px 2px 2px">
                                <div style="display: flex;">
                                    <img :src=item.postImage  style="width: 100px;height: 100px;">
                                    <div style="text-align: center;margin-left: 75px">
                                        <h4>{{item.postHead}}</h4>
                                        <h5><i class="el-icon-chicken"></i>点赞数：{{item.postLikes}}</h5>
                                    </div>

                                </div>
                            </div>
                        </el-tab-pane>
                        <!--<el-tab-pane label="最新动态"></el-tab-pane>
                        <el-tab-pane label="热度最高"></el-tab-pane>
                        <el-tab-pane label="官方动态"></el-tab-pane>-->
                    </el-tabs>

                    <div style="margin-left: 420px;margin-top: 30px">
                        <el-pagination
                                small
                                layout="prev, pager, next"
                                @prev-click="pageSub"
                                @next-click="pageAdd"
                                :total="50">
                        </el-pagination>
                    </div>
                    <el-divider></el-divider>
                    <div style="position:relative;top:20px;width: 400px">
                        <h2>发动态</h2>
                        <div class="mar">
                            <el-input v-model="inputName">名称</el-input>
                        </div>
                        <div class="mar">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="内容"
                                    v-model="textarea2">
                            </el-input>
                        </div>
                        <div class="mar">
                            <!--<el-upload
                                    class="upload-demo"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :file-list="fileList"
                                    list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>-->
                        </div>
                        <div class="mar">
                            <el-button @click="submitPost" type="success" round>发送</el-button>
                        </div>

                    </div>

                </div>

            </el-main>


            <Footer></Footer>
        </el-container>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import Carousel from "../components/Carousel";
    export default {
        name: "Forum",
        components:{
            Header,
            Footer,
            Carousel
        },
////////////////////////////////////////////////数据////////////////////////////////////////
        data(){
            return{
                page: 1,
                tabPosition: 'left',
                fileList: [],
                inputName:'标题',
                textarea2:'内容',
                urls: [
                    {id:0,idView:require("../assets/goodsImage/1.jpg")},
                    {id:1,idView:require("../assets/goodsImage/9.jpg")},
                    {id:2,idView:require("../assets/goodsImage/10.jpg")},
                ],
                posts:[

                ],
                post:{
                    postid:null,
                    postHead:null,
                    postImage:'',
                    postClass:'',
                    postLikes:null,
                }
            }
        },
////////////////////////////////////////methods//////////////////////////////////////////
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },

            pageSub(){
                if (this.$data.goodsPage > 1){
                    this.$data.goodsPage -= 1;
                }
                console.log(this.$data.goodsPage);
            },

            pageAdd(){
                this.$data.goodsPage += 1;
                console.log(this.$data.goodsPage);
            },

            goPostDetail(key){
                console.log("获取id："+key);
                localStorage.setItem("postId",key);
                this.$router.push("/postDetail");
            },

            submitPost(){
                this.$http({
                    url:' http://localhost:8083/forum/addPost',
                    method:'POST',
                    params:{
                        "postHead":this.inputName,
                        "postContext":this.textarea2,
                        "postAuthorid":localStorage.getItem("userID")
                    }
                }).then(res=>{
                    console.log(res);
                    if(res.data.res){
                        this.$message('动态提交成功');
                        this.inputName = '标题'
                        this.textarea2 = '内容'
                    }else {
                        this.$message('动态提交失败');
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }

        },

////////////////////////////////////钩子函数////////////////////////////////
        created() {
            this.$http({
                method:'POST',
                url:'http://localhost:8083/forum/showPosts',
                params:{
                    "number":this.page,
                }
            }).then(res=>{
                console.log(res.data);
                for(let i in res.data){
                    this.post = res.data[i];
                    this.post.postImage = require("../assets/forumImage/" + res.data[i].postImage);
                    this.posts.push(this.post);
                }
            }).catch(err=>{
                console.log(err);
            })
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .mar{
        margin-top: 10px;
        margin-bottom: 10px;
    }
</style>